<template>
    <div>
        <el-row :gutter="20" class="form-line">
            <el-col :span="3" class="form-label">
                所属服务
            </el-col>
            <el-col :span="3">
                <el-select size="small"
                           v-model="userObj.serviceCode"
                           @change="changeService"
                           filterable>
                    <el-option
                            v-for="item in userObj.serviceList"
                            :key="item.serviceCode"
                            :label="item.serviceName"
                            :value="item.serviceCode">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="3" class="form-label">
                人员名称
            </el-col>
            <el-col :span="3">
                <el-input v-model="userObj.userName" size="small"></el-input>
            </el-col>
            <el-col :span="6" :offset="6">
                <el-button type="primary" size="small" @click="selectRoleUserList">查询</el-button>
            </el-col>
        </el-row>

        <el-table
                :data="userObj.roleUserListShow"
                min-width="100%">
            <el-table-column
                    prop="userId"
                    label="人员编号"
                    min-width="25%">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="人员姓名"
                    min-width="25%">
            </el-table-column>
            <el-table-column
                    label="操作" min-width="25%">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editRoleUser(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                class="se-pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="userObj.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="userObj.currentSize"
                :hide-on-single-page="false"
                layout="total, sizes, prev, pager, next"
                :total="userObj.total">
        </el-pagination>

        <el-dialog title="编辑" :visible.sync="userObj.dialogFormVisible" width="30%">

            <el-select
                    v-model="userObj.dialogRoleUser.roleId"
                    size="small"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入角色名称"
                    :remote-method="selectRoleList"
                    :loading="userObj.loading">
                <el-option
                        v-for="item in userObj.roleList"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" size="small" @click="inserUserRole">新增</el-button>
            <el-table
                    :data="userObj.dialogRoleUser.roleListShow"
                    min-width="100%">
                <el-table-column
                        prop="roleName"
                        label="角色名称"
                        min-width="35%">
                </el-table-column>
                <el-table-column
                        prop="descr"
                        label="角色描述"
                        min-width="45%">
                </el-table-column>
                <el-table-column
                        label="操作" min-width="20%">
                    <template slot-scope="scope">
                        <el-popover
                                placement="top"
                                width="160"
                                v-model="scope.row.popover">
                            <p>确认删除？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="scope.row.popover = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="deleteRole(scope.row.id)">确定</el-button>
                            </div>
                            <el-button class="delete-margin" size="small" type="text" slot="reference">删除</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="se-pagination"
                    @size-change="handleSizeChangeDialog"
                    @current-change="handleCurrentChangeDialog"
                    :current-page.sync="userObj.dialogRoleUser.currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="userObj.dialogRoleUser.currentSize"
                    :hide-on-single-page="false"
                    layout="total, sizes, prev, pager, next"
                    :total="userObj.dialogRoleUser.total">
            </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            userObj: {
                serviceCode: "",
                serviceList: [],
                roleUserList: [],
                roleUserListShow: [],
                userName: "",
                currentPage: 1,
                currentSize: 10,
                total: 0,
                dialogFormVisible: false,
                dialogInsertRoleVisible: false,
                userId: "",
                loading: false,
                manager: false,
                roleList: [],
                dialogRoleUser: {
                    currentPage: 1,
                    currentSize: 10,
                    total: 0,
                    userId: "",
                    userName: "",
                    roleId: "",
                    roleList: [],
                    roleListShow: []
                }
            }
        };
    },
    mounted: function () {
        this.selectServiceList();
    },
    methods: {
        selectServiceList: function () {
            axios.get('/se/common/selectService'
            ).then(res => {//用function会获取不到vue data值
                this.userObj.serviceList = res.data.data;
                if (this.userObj.serviceList.length > 0) {
                    this.userObj.serviceCode = this.userObj.serviceList[0].serviceCode;
                    this.selectRoleUserList();
                }
            }).catch(function (error) {
                console.log(error);
            });
        },
        selectRoleUserList: function () {
            axios.get('/se/user/selectUserPage', {
                params: {
                    serviceCode: this.userObj.serviceCode,
                    userName: this.userObj.userName
                }
            }).then(res => {//用function会获取不到vue data值
                this.userObj.roleUserList = res.data.data;
                this.userObj.total = this.userObj.roleUserList.length;
                this.showCurrentPage();
            }).catch(function (error) {
                console.log(error);
            });
        },
        changeService: function (val) {
            this.selectRoleUserList();
        },
        editRoleUser: function (rowDate) {
            this.userObj.dialogFormVisible = true;
            this.userObj.dialogRoleUser.userId = rowDate.userId;
            this.userObj.dialogRoleUser.userName = rowDate.userName;
            this.selectUserRoleDetail();
        },
        deleteRole: function (id) {
            axios.delete('/se/user/deleteRoleUser',
                {
                    params: {
                        id: id
                    }
                }
            ).then(res => {
                this.selectRoleUserList();
                this.selectUserRoleDetail();
            });
        },
        selectUserRoleDetail: function () {
            axios.get('/se/user/selectUserDetail', {
                params: {
                    serviceCode: this.userObj.serviceCode,
                    userId: this.userObj.dialogRoleUser.userId
                }
            }).then(res => {//用function会获取不到vue data值
                this.userObj.dialogRoleUser.roleList = res.data.data;
                this.userObj.dialogRoleUser.total = this.userObj.dialogRoleUser.roleList.length;
                this.showCurrentPageDialog();
            }).catch(function (error) {
                console.log(error);
            });
        },
        selectRoleList: function (roleName) {
            axios.get('/se/role/selectRolePage', {
                params: {
                    serviceCode: this.userObj.serviceCode,
                    roleName: roleName
                }
            }).then(res => {
                this.userObj.roleList = res.data.data;
            }).catch(function (error) {
                console.log(error);
            });
        },
        inserUserRole: function () {
            if (this.userObj.dialogRoleUser.roleId == null || this.userObj.dialogRoleUser.roleId == "") {
                return false;
            }
            axios.post('/se/role/insertRoleUser',
                Qs.stringify({
                    serviceCode: this.userObj.serviceCode,
                    roleId: this.userObj.dialogRoleUser.roleId,
                    userId: this.userObj.dialogRoleUser.userId,
                    userName: this.userObj.dialogRoleUser.userName
                })
            ).then(res => {
                this.selectUserRoleDetail();
            });
        },
        handleSizeChange: function (pageSize) {
            this.userObj.currentSize = pageSize;
            this.showCurrentPage();
        },
        handleCurrentChange: function (curPage) {
            this.showCurrentPage();
        },
        showCurrentPage: function () {
            let start = (this.userObj.currentPage - 1) * this.userObj.currentSize;
            let end = this.userObj.currentPage * this.userObj.currentSize;
            this.userObj.roleUserListShow = this.userObj.roleUserList.slice(start,end);
        },
        handleSizeChangeDialog: function (pageSize) {
            this.userObj.roleUser.currentSize = pageSize;
            this.showCurrentPageDialog();
        },
        handleCurrentChangeDialog: function (curPage) {
            this.showCurrentPageDialog();
        },
        showCurrentPageDialog: function () {
            let start = (this.userObj.dialogRoleUser.currentPage - 1) * this.userObj.dialogRoleUser.currentSize;
            let end = this.userObj.dialogRoleUser.currentPage * this.userObj.dialogRoleUser.currentSize;
            this.userObj.dialogRoleUser.roleListShow = this.userObj.dialogRoleUser.roleList.slice(start,end);
        },
    },
    watch: {
        '$route' (to, from) {
            this.selectServiceList();
        }
    }
}
</script>